<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>天乐公益活动</title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_285411_eyuh08h4e06yldi.css"/>
		<style type="text/css">
			.icon-fanhui{
				font-size: 26px;
				color: #fff;
				position: absolute;
				top: 10px;
				left: 10px;
			}
			.logo{
				width: 100%;
				height: 262px;
				overflow: hidden;
			}
			.logo img{
				width: 100%;
				height:100%;
			}
		</style>
	</head> 

	<body>
		<i class="iconfont icon-fanhui"></i>
		<div class="logo">
			<img src="images/logo.png"/>
		</div>
		<div class="draw" id="lottery">
			<div class="shadow">
				<div class="warp">
					<div class="login_psd1">
						<span>天乐社区报名</span>
						<span class="chacha">X</span>
					</div>
					<div class="login_psd">
						<span>用户名</span>
						<input type="text" placeholder="请输入您的用户名" value="" class="nickname" />
					</div>
					<div class="login_psd">
						<span>手机号</span>
						<input type="number" placeholder="请填写真实手机号" value="" class="userphone" />
					</div>
					<div class="login_psd">
						<span>验证码</span>
						<input type="tel" placeholder="" class="yanzheng" />
						<button class="btn">获取验证码</button>
					</div>
					<div class="descript">
						<p>*若不是天乐会员，报名成功后就成为天乐会员啦！</p>
						<p>默认密码123456</p>
					</div>
					<div class="login_psd2">
						<div class="login_btn">
							提交
						</div>
					</div>
				</div>
			</div>
			<div class="num">您还有&nbsp;<span>1</span>&nbsp;次机会</div>
			<div class="table_warp">
				<table>
					<tbody>
						<tr>
							<td class="item lottery-unit lottery-unit-0" lottery-unit='0'>
								<div class="img">
									<img src="images/img1.png" alt="">
								</div>

							</td>
							<td class="item lottery-unit lottery-unit-1" lottery-unit='1'>
								<div class="img">
									<img src="images/img2.png" alt="">
								</div>

							</td>
							<td class="item lottery-unit lottery-unit-2" lottery-unit='2'>
								<div class="img">
									<img src="images/img3.png" alt="">
								</div>

							</td>
						</tr>

						<tr>
							<td class="item lottery-unit lottery-unit-7" lottery-unit='7'>
								<div class="img">
									<img src="images/img4.png" alt="">
								</div>

							</td>
							<td class="click_start">
								<div class="img">
									<img src="images/img5.png" alt="">
								</div>
							</td>

							<td class="item lottery-unit lottery-unit-3" lottery-unit='3'>
								<div class="img">
									<img src="images/img6.png" alt="">
								</div>
							</td>
						</tr>
						<tr>
							<td class="item lottery-unit lottery-unit-6" lottery-unit='6'>
								<div class="img">
									<img src="images/img8.png" alt="">
								</div>

							</td>
							<td class="item lottery-unit lottery-unit-5" lottery-unit='5'>
								<div class="img">
									<img src="images/img7.png" alt="">
								</div>

							</td>
							<td class="item lottery-unit lottery-unit-4" lottery-unit='4'>
								<div class="img">
									<img src="images/img9.png" alt="">
								</div>

							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="winners">
				<img src="images/tongzhi.png" />
				<div class="swiper-container Recommend_banner">
					<div class="swiper-wrapper">

					</div>
				</div>
			</div>
			<div class="rule">
				<a href="javascript:;">活动规则</a>
			</div>
			<div class="rule_info">
				<p></p>
			</div>
		</div>
		<span class="addressdialog"></span>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper-3.4.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var mySwiper = new Swiper('.Recommend_banner', {
				autoplay: 2500,
				loop: true,
				observer: true, //修改swiper自己或子元素时，自动初始化swiper
				observeParents: true, //修改swiper的父元素时，自动初始化swiper
				direction: 'vertical',
				autoplayDisableOnInteraction: false,
			})
			var list = $('.table_warp td.item');
			var isRun = false;
			list.sort(function(a, b) {
				return $(a).attr('lottery-unit') - $(b).attr('lottery-unit');
			});
			/**
			 * 
			 * @param {Object} start    动画开始点
			 * @param {Object} allStep   总步数
			 */
			function animateLoop(start, allStep) {
				var speed = 2;
				var t = 10;
				var direct = 1;
				var timer = setInterval(slide, t);

				function slide() {
					clearInterval(timer);
					allStep--;
					if(allStep < -1) {
						isRun = false;
						clearInterval(timer); //结束
						return;
					}

					if(start >= list.length) {
						start = 0;
					}
					if(start < 0) {
						start = list.length - 1;
					}
					list.removeClass('active');
					list.eq(start).addClass('active');
					start = start + direct;

					t = t + speed;

					if(t > 200) {
						t = 200;
					}

					if(allStep == 5) {
						speed = 20;
					}
					if(allStep <= 2) {
						t = 600;
					}
					if(allStep <= 1) {
						t = 700;
					}
					if(allStep <= 0) {
						t = 800;
					}
					timer = setInterval(slide, t);
				}
			}

			/**
			 * 
			 * @param {Object} num    中的是第几个 0-7,默认是不中奖
			 */
			function reward(num) {
				var circleNum = 8;
				var start = Math.floor(Math.random() * list.length);

				var allStep = circleNum * (list.length) + num - start;
				//开启动画
				animateLoop(start, allStep);
			}
			function GetQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if(r != null) return unescape(r[2]);
				return null;
			}

			$.ajax({
				type: "post",
				url: "http://web.tl178.cn/Draw/Sudoku",
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				data: {
					id: GetQueryString("id")
				},
				success: function(data) {
					var data = JSON.parse(data)
					console.log(data)
					if(data["status"] == 1) {
						var news = data["list"]["apply"]
						var li = ""
						for(var i = 0; i < news.length; i++) {
							li += "<div class='swiper-slide' style='overflow: hidden;text-overflow: ellipsis;'>" + "恭喜用户" + news[i]["tel"] + "&nbsp;&nbsp;" + "获得" + news[i]["name"] + "</div>"
						}
						$(".swiper-wrapper").append(li)
						$(".rule_info p").html(data["list"]["result"]["rule"])
						var id = data["list"]["result"]["community_Id"]
//						$(".userphone").blur(function() {
//							$.ajax({
//								type: "post",
//								url: "http://web.tl178.cn/Apply/verify",
//								headers: {
//									'Content-Type': 'application/x-www-form-urlencoded'
//								},
//								data: {
//									mobile: $(".userphone").val()
//								},
//								success: function(data) {
//									var data = JSON.parse(data)
//									console.log(data)
//									if(data["status"] == 0) {
//										$(".addressdialog").show();
//										$(".addressdialog").html(data["message"]);
//										$(".addressdialog").fadeOut(1200);
//									} else {
										$(".btn").click(function() { //获取验证码 
											if(!$(".userphone").val()) {
												$(".addressdialog").show();
												$(".addressdialog").html("手机号不能为空");
												$(".addressdialog").fadeOut(1200);
											} else {
												var reg = new RegExp(/^1[34578]\d{9}$/);
												if(!reg.test($(".userphone").val()) || $(".userphone").val().length != 11) {
													$(".addressdialog").show();
													$(".addressdialog").html("请输入正确的手机号");
													$(".addressdialog").fadeOut(1200);
												} else {
													$.ajax({
														type: "post",
														url: "http://web.tl178.cn/Login/send",
														headers: {
															'Content-Type': 'application/x-www-form-urlencoded'
														},
														data: {
															mobile: $(".userphone").val(),
															type: 5
														},
														success: function(data) {
															$(".addressdialog").show();
															$(".addressdialog").html("验证码发送成功");
															$(".addressdialog").fadeOut(1200);
															var wait = 60;
															$(".btn").attr("disabled", true);
															$(".btn").css({
																"color": "#B3B3B3"
															})
															var timer = setInterval(function() {
																$(".btn").html("重新发送" + "(" + wait + ")")
																wait--
																if(wait < 0) {
																	$(".btn").html("获取验证码")
																	$(".btn").attr("disabled", false);
																	$(".btn").css({
																		"color": "#000"
																	})
																	clearInterval(timer)
																}
															}, 1000)
														}
													});
												}
											}
										})
//									}
//								}
//							})
//						});

						$(".login_btn").click(function() {
							if(!$(".nickname").val()) {
								$(".addressdialog").show();
								$(".addressdialog").html("用户名不能为空");
								$(".addressdialog").fadeOut(1200);
							} else {
								if(!$(".userphone").val() || !$(".yanzheng").val()) {
									$(".addressdialog").show();
									$(".addressdialog").html("手机号或验证码不能为空");
									$(".addressdialog").fadeOut(1200);
								} else {
									$.ajax({
										type: "post",
										url: "http://web.tl178.cn/Apply/community",
										async: true,
										headers: {
											'Content-Type': 'application/x-www-form-urlencoded'
										},
										data: {
											username: $(".nickname").val(),
											tel: $(".userphone").val(),
											code: $(".yanzheng").val(),
											type:1,
											community_Id: id
										},
										success: function(data) {
											console.log(data)
											var result = JSON.parse(data)
											if(result["status"] == 1) {
												var id = result["id"]
												$(".addressdialog").show();
												$(".addressdialog").html(result["message"]);
												$(".addressdialog").fadeOut(1200);
												sessionStorage.setItem("userphone", $(".userphone").val())
												$(".shadow").hide()
											} else {
												$(".addressdialog").show();
												$(".addressdialog").html(result["message"]);
												$(".addressdialog").fadeOut(1200);
											}
										}
									});
								}
							}
						})
						$('.table_warp').on('click', '.click_start', function() {
							//开始抽奖
							if(!sessionStorage.getItem("userphone")) {
								$(".shadow").show()
							} else {
								$(".shadow").hide()
								$.ajax({
									type: "post",
									url: "http://web.tl178.cn/Draw/add_draw",
									headers: {
										'Content-Type': 'application/x-www-form-urlencoded'
									},
									data: {
										tel: sessionStorage.getItem("userphone"),
										id: 3
									},
									success: function(data) {
										var data = JSON.parse(data)
										console.log(data)
										if(data["status"] == 1) {
											reward(data["name"]*1);
											setTimeout(function(){
												if(data["name"]!=5){
													alert("恭喜您中奖了!")
												}else{
													alert("很遗憾,未中奖!")
												}
											},8000)
											
											isRun = false;
											$(".num span").html(0)
										} else {
											$(".addressdialog").show();
											$(".addressdialog").html(data["message"]);
											$(".addressdialog").fadeOut(2000);
										}
									}
								})
							}
			
						});
					} else {
						var news = data["list"]["apply"]
						var li = ""
						for(var i = 0; i < news.length; i++) {
							li += "<div class='swiper-slide' style='overflow: hidden;text-overflow: ellipsis;'>" + "恭喜用户" + news[i]["tel"] + "&nbsp;&nbsp;" + "获得" + news[i]["name"] + "</div>"
						}
						$(".swiper-wrapper").append(li)
						$(".rule_info p").html(data["list"]["result"]["rule"])
						var id = data["list"]["result"]["community_Id"]
						$('.table_warp').on('click', '.click_start', function() {
							$(".addressdialog").show();
							$(".addressdialog").html(data["message"]);
							$(".addressdialog").fadeOut(2000);
						})		
					}
				}
			})
			$(".chacha").click(function() {
				$(".shadow").hide()
			})
			$(".icon-fanhui").click(function(){
				history.back()
			})
		</script>
	</body>

</html>